<template>
  <div>
    <div class="cc" v-if="isShow">
      <div class="shortcut">
        <img
          src="../../assets/left.png"
          style="width: 30px; height: 30px"
          alt=""
          @click="top_shoppage"
        />
        <div class="user-right">
          <i class="iconfont icon-sousuo nn"></i>
          <i class="iconfont icon-fenxiang"></i>
        </div>
      </div>
    </div>
    <div class="nav-header" v-if="isShow == false">
      <div class="nav-f">
        <div class="nav">
          <div class="nav-main">
            <van-icon name="arrow-left" />
            <div class="search">
              <i class="iconfont icon-sousuo mm"></i>
              <input type="text" placeholder="绿野仙踪" />
            </div>
            <i class="iconfont icon-fenxiang"></i>
          </div>
        </div>

        <div class="shop-cut">
          <ul class="shop-list">
            <li><a href="#">商品</a></li>
            <li><a href="#node">评价</a></li>
            <li><a href="#info">详情</a></li>
            <li><a href="#more">推荐</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item style="height: 250px"
        ><img :src="xuan.imagepath1" alt="商品轮播"
      /></van-swipe-item>
      <van-swipe-item style="height: 250px"
        ><img :src="xuan.imagepath1" alt="商品轮播"
      /></van-swipe-item>
      <van-swipe-item style="height: 250px"
        ><img :src="xuan.imagepath1" alt="商品轮播"
      /></van-swipe-item>
      <van-swipe-item style="height: 250px"
        ><img :src="xuan.imagepath1" alt="商品轮播"
      /></van-swipe-item>
    </van-swipe>
    <div class="introduce">
      <div>
        <div class="introduce-back">
          <div class="introduce-title">
            <div class="price">
              <i class="iconfont icon-qianqian- c23"></i
              ><span>{{ xuan.goodsprice }}</span>
            </div>
            <div class="sold_out">
              <p>已售{{ xuan.salesvolume }}</p>
            </div>
          </div>
          <div class="shop_info">
            <p>{{ xuan.goodsname }}</p>
            <i class="iconfont icon-xingxing c22"></i>
          </div>
          <div class="more">
            <div>
              <ul class="more-list">
                <li><i class="iconfont icon-duigou c24"></i>上门取件</li>
                <li><i class="iconfont icon-duigou c24"></i>七天无理由退货</li>
                <li><i class="iconfont icon-duigou c24"></i>晚发必赔</li>
              </ul>
              <i class="iconfont icon-xiangyou1"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="address">
        <ul>
          <li>
            <div>
              <span>优惠</span>
              <div class="ticket1">
                <span>通用券</span>
                |
                <span>立享9折</span>
              </div>
            </div>
            <i class="iconfont icon-xiangyou1"></i>
          </li>
          <li>
            <div>
              <span>已选</span>
              <div class="ticket">
                <span>猪猪侠一只</span>
              </div>
            </div>
            <i class="iconfont icon-xiangyou1"></i>
          </li>
          <li>
            <div>
              <span>优惠</span>
              <div class="ticket" style="margin-top: 20px">
                <span>广东东莞</span>
                |
                <span>包邮</span>
                <div class="cash_commodity">
                  <span>现货</span>
                  |
                  <span>48小时之内发货</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="node" id="node">
        <div class="node-main">
          <div class="node-head">
            <span>晒单笔记</span>
            <i class="iconfont icon-xiangyou1"></i>
          </div>
          <div class="ima">
            <a href="">
              <img
                src="../../assets/1c545435be61ee5af2e6949ed2381ee.jpg"
                alt=""
              />
            </a>
          </div>
          <div class="line"></div>
          <div class="appraise">
            <div class="appraise-title">
              <span>商品评价(173)</span
              ><span
                >4.7分<i
                  class="iconfont icon-xiangyou1"
                  style="margin-left: 10px"
                ></i
              ></span>
            </div>
            <div class="user-appraise">
              <div><img src="../../assets/left.png" alt="" />冰糖葫芦娃</div>
              <p>
                很意外，没想到这个价钱买的东西质量会这么好，手感不错，用料十足
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="store">
        <div class="store-title">
          <img src="../../assets/left.png" alt="" />
          <ul class="store-list">
            <li>{{ xuan.shopname }}</li>
            <li>
              <div>卖家口碑</div>
            </li>
            <li>粉丝数 9.7万 | 已售18.9万</li>
          </ul>
          <p>进店逛逛 <i class="iconfont icon-xiangyou1"></i></p>
        </div>
        <div class="store-main">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
              ><img :src="xuan.imagepath1" alt=""
            /></van-swipe-item>
            <van-swipe-item
              ><img :src="xuan.imagepath1" alt=""
            /></van-swipe-item>
            <van-swipe-item
              ><img :src="xuan.imagepath1" alt=""
            /></van-swipe-item>
            <van-swipe-item
              ><img :src="xuan.imagepath1" alt=""
            /></van-swipe-item>
          </van-swipe>
        </div>
      </div>

      <div class="shop-info2" id="info">
        <p>图文信息</p>
        <div class="shop-info2-main">
          <img :src="xuan.imagepath1" alt="" />
          <img :src="xuan.imagepath1" alt="" />
          <img :src="xuan.imagepath1" alt="" />
          <img :src="xuan.imagepath1" alt="" />
          <img :src="xuan.imagepath1" alt="" />
          <img :src="xuan.imagepath1" alt="" />
          <img :src="xuan.imagepath1" alt="" />
          <img :src="xuan.imagepath1" alt="" />
        </div>
      </div>
      <div class="specification">
        <p id="specification" @click="show">规格参数</p>
        <div class="specification_list" v-if="xx">
          哈哈哈 哈哈哈 哈哈哈 哈哈哈
        </div>
        <p class="priceX" @click="show1">价格说明</p>
        <div class="priceX-list" v-if="cc">xxxxxxxxxxxxxxxxxx</div>
      </div>
    </div>

    <div class="icon-x">
      <div class="icon">
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" />
          <van-goods-action-icon icon="cart-o" text="购物车" />
          <van-goods-action-icon icon="shop-o" text="店铺" />
          <van-goods-action-button
            type="primary"
            text="加入购物车"
            @click="popp_k"
          />
          <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="pop_k"
          />
        </van-goods-action>
      </div>
    </div>
    <div>
      <div class="pop1" v-if="pop">
        <div class="popup">
          <div class="popup-pp" @click="popg">
            <img src="../../assets/close.png" width="15px" alt="" />
          </div>
          <div class="im">
            <img :src="xuan.imagepath1" alt="" />
            <span class="np"
              >￥ <span class="q">{{xuan.goodsprice}}</span> &nbsp;
            </span>
          </div>
          <div class="hint">
            <p>
              <img src="../../assets/duigou.png" width="15px" alt="" />
              <span>上门取件</span>
            </p>
            <p>
              <img src="../../assets/duigou.png" width="15px" alt="" />
              <span>7天无理由退货</span>
            </p>
            <p>
              <img src="../../assets/duigou.png" width="15px" alt="" />
              <span>晚发必赔</span>
            </p>
          </div>
          <div class="design">
            <h6>颜色 款式</h6>
            <div class="design_1">
              <div class="ax" ref="aaa" @click="ax">{{xuan.colour}}</div>
              <!-- <div class="ax" ref="aaa1" @click="ax_1">红色</div> -->
            </div>
            <h6 class="h66">大小</h6>
            <div class="design_1">
              <div class="ax1" @click="ax1" ref="aaa1">{{xuan.colour}}</div>
              <!-- <div class="ax1" @click="ax1">L</div> -->
            </div>
          </div>
          <div class="price">
            <p>数量</p>
            <div class="addsub">
              <van-stepper v-model="value" />
            </div>
          </div>
          <div class="ply">
            <button @click="plyy">立即购买</button>
          </div>
        </div>
      </div>
      
      <div class="pop1" v-if="popp">
        <div class="popup">
          <div class="popup-pp" @click="popg">
            <img src="../../assets/close.png" width="15px" alt="" />
          </div>
          <div class="im">
            <img :src="xuan.imagepath1" alt="" />
            <span class="np"
              >￥ <span class="q">{{xuan.goodsprice}}</span> &nbsp;
            </span>
          </div>
          <div class="hint">
            <p>
              <img src="../../assets/duigou.png" width="15px" alt="" />
              <span>上门取件</span>
            </p>
            <p>
              <img src="../../assets/duigou.png" width="15px" alt="" />
              <span>7天无理由退货</span>
            </p>
            <p>
              <img src="../../assets/duigou.png" width="15px" alt="" />
              <span>晚发必赔</span>
            </p>
          </div>
          <div class="design">
            <h6>颜色 款式</h6>
            <div class="design_1">
              <div class="ax" ref="aaa" @click="ax">{{xuan.colour}}</div>
              <!-- <div class="ax" ref="aaa1" @click="ax_1">红色</div> -->
            </div>
            <h6 class="h66">大小</h6>
            <div class="design_1">
              <div class="ax1" @click="ax1" ref="aaa1">{{xuan.size}}</div>
              <!-- <div class="ax1" @click="ax1">L</div> -->
            </div>
          </div>
          <div class="price">
            <p>数量</p>
            <div class="addsub">
              <van-stepper v-model="value" />
            </div>
          </div>
          <div class="ply">
            <button @click="ply2">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
    <Shop />
  </div>
</template>

<script>

import { Toast } from "vant";
import Shop from "../../components/Shopping_page_shop.vue";
import { ShoppingMain,addOrder,addshop } from "../../api/Shopping";
export default {
  components: {
    Shop,
  },
  data() {
    return {
      scrollTop: "",
      isShow: true,
      xx: false,
      cc: false,
      xuan: [],
      // show: false,
      sku: {
        // 数据结构见下方文档
      },
      goods: {
        // 数据结构见下方文档
      },
      messageConfig: {
        // 数据结构见下方文档
      },
      pop: false,
      value: 1,
      colo: '',
      popp: false,
      id:''
    };
  },
  methods: {
    top_shoppage() {
      this.$router.push("/Shopping_page");
      // 返回上一页
      // this.$router.go(-1);
    },
    Shoppingm() {
      let data = JSON.parse(localStorage.getItem("userid"));
      this.id = data + "";
      ShoppingMain({
        gid: this.id,
      })
        .then((res) => {
          if (res.code == 200) {
            this.xuan = res.result;
            console.log(this.xuan);
          }
        })
        .catch((rest) => {
          console.log(rest);
        });
    },
    show() {
      console.log(123);
      this.xx = true;
    },
    show1() {
      this.cc = !this.cc;
    },
    ax() {
      console.log(123);
      this.$refs.aaa.style.background = "pink";
      this.$refs.aaa.style.color = "red";

    },
    ax1() {
      this.$refs.aaa1.style.background = "pink";
      this.$refs.aaa1.style.color = "red";

    },

    plus(){
      console.log(533432);
      this.value++
    },
    popg() {
      this.popp = false
      this.pop = false
    },
    pop_k() {
      this.pop = true
    },
    popp_k() {
      this.popp = true
    },
    // 立即购买
    plyy() {
      addshop({
        uid: this.id,
        gid:this.xuan.gid,
        goodsnum:this.value,
        gsku:1
      }).then(res => {
        console.log(res);

        this.$router.push('/Orderpayment');
        console.log(this.xuan.gid);
        console.log(this.value);
        console.log(this.xuan.size);
      })
    },
    //添加购物车
    ply2() {
      addshop({
        uid: this.id,
        gid:this.xuan.gid,
        goodsnum:this.value,
        gsku:1
      }).then(res => {
        console.log(res);
        // this.$router.push('/Shopping_trolley');
        Toast("添加成功");
        this.popp = false
        console.log(this.xuan.gid);
        console.log(this.value);
        console.log(this.xuan.size);
      })
    }
    
  },
  created() {
    this.Shoppingm();
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      if (top > 10) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    });
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
a {
  text-decoration: none;
}

body {
  background-color: rgb(251, 247, 247);
}

.cc {
  position: absolute;
  display: block;
  z-index: 998;
  width: 100%;
}

.shortcut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.user {
  display: block;
}

.user p {
  font-size: 25px;
  color: black;
}

.user-right {
  display: flex;
  width: 100px;
  justify-content: space-around;
}

.icon-fenxiang,
.user p,
.icon-sousuo {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}

.icon-sousuo {
  margin-right: 10px;
}

.nav-header {
  width: 100%;
  position: fixed;
  z-index: 999;
}

.nav-f {
  padding-top: 20px;
  display: block;
  background-color: white;
  border-bottom: 2px solid rgb(193, 179, 179);
}

.nav-main {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.back {
  width: 35px;
  height: 40px;
}

.search {
  position: relative;
}

.back p,
.nav-main i {
  background: rgba(0, 0, 0, 0);
  color: black;
}

.mm {
  position: absolute;
  top: -5px;
}

.search input {
  width: 280px;
  height: 30px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.1);
  border: 0;
  padding-left: 30px;
  box-sizing: border-box;
}

.shop-cut {
  width: 280px;
  margin: 10px auto;
}

.shop-list {
  display: flex;
  justify-content: space-around;
}

.introduce {
  width: 95%;
  margin: 0 auto;
}

.introduce-back {
  background-color: #fff;
  border-radius: 10px;
}

.introduce > div {
  width: 96%;
  margin: 0 auto;
}

.introduce-title {
  display: flex;
  justify-content: space-between;
}

.c23 {
  font-size: 12px;
}

.price span:nth-child(2) {
  font-size: 18px;
}

.price span:nth-child(3) {
  font-size: 14px;
  color: red;
  margin-left: 5px;
}

.sold_out {
  font-size: 14px;
}

.shop_info {
  display: flex;
  justify-content: space-around;
}

.c22 {
  font-size: 20px;
}

.more {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background-color: aliceblue;
}

.more-list {
  width: 90%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.more > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c24 {
  margin-right: 8px;
}

.address ul {
  height: 220px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 10px;
  padding: 10px;
  margin-top: 5px;
}

.address ul li {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.address ul li > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
}

.address ul li > div > span {
  font-size: 16px;
}

.ticket1 {
  border: 1px solid rgb(226, 150, 150);
  font-size: 14px;
  color: rgb(215, 95, 95);
  width: 150px;
  text-align: center;
  padding: 2px;
}

.ticket {
  width: 150px;
  font-size: 14px;
}

.cash_commodity {
  margin-top: 5px;
  color: rgb(243, 223, 112);
}

.node-main {
  margin-top: 10px;
  background-color: white;
  padding: 10px;
  border-radius: 20px;
}

.node-head,
.appraise-title {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  font-weight: 600;
  color: rgb(60, 51, 51);
}

.ima {
  width: 200px;
  display: flex;
  justify-content: space-between;
}

.ima a:nth-child(1) {
  display: block;
  width: 100px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
}

.ima a:nth-child(2) {
  display: block;
  width: 70px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
}

.ima img {
  width: 100%;
  height: 100%;
}

.line {
  width: 98%;
  height: 0;
  margin: 10px auto;
  border: 1px solid rgb(186, 168, 168);
}

.appraise-title span:nth-child(2) {
  color: rgb(117, 108, 108);
  font-size: 14px;
}

.user-appraise {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 76px;
}

.user-appraise div {
  width: 120px;
  height: 20px;
  display: flex;
  justify-content: space-between;
}

.user-appraise img {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.store-title img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.store {
  height: 350px;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.store-title {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.store-list li,
.store-title p {
  font-size: 12px;
  color: #b4a2a2;
}

.store-title .store-list li:nth-child(1) {
  font-size: 16px;
  font-weight: bold;
  color: black;
}

.store-main {
  height: 200px;
  margin-top: 20px;
}

.cczz {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100px !important;
  height: 10px;
}

.cczz img {
  width: 100%;
  height: 100%;
}

.cczz p {
  font-size: 12px;
}

.shop-info2 p {
  margin-top: 10px;
}

.shop-info2-main img {
  width: 100%;
}

.specification {
  display: flex;
  flex-direction: column;
  height: auto;
  background-color: #ede5e5;
  border-radius: 20px;
  font-size: 15px;
}

.specification_list,
.priceX-list {
  display: none;
}

.icon-x {
  position: fixed;
  bottom: 0;
  z-index: 999;
  background-color: white;
}

.icon {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-f {
  width: 40%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-f a {
  display: block;
  width: 50px;
  height: 50px;
}

.c30 {
  font-size: 30px;
  color: black;
}

.icon img {
  display: block;
  border-radius: 20px;
  width: 30px;
  height: 30px;
  text-align: center;
}

.icon-f a span {
  display: block;
  width: 50px;
  height: 20px;
}

.shopcar {
  width: 250px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.shopcar div {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid black;
}

.shopcar .pay {
  background-color: rgb(228, 62, 62);
  color: white;
}

.pop1 {
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  /* display: none; */
  z-index: 99999999;
}

.popup-pp {
  width: 30px;
  height: 30px;
  float: right;
  margin-top: -10px;
  margin-right: 15px;
  z-index: 999;
}
.popup-pp img {
  width: 100%;
  height: 100%;
}
.popup {
  width: 100%;
  height: 600px;
  background-color: rgb(247, 247, 247);
  border-radius: 15px;
  padding-top: 20px;
  box-sizing: border-box;
  position: relative;
  position: fixed;
  bottom: 0;
  padding-left: 15px;
  /* display: none; */
}

.im img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.im {
  width: 80%;
  /* padding-left: 15px; */
  position: relative;
}

.q {
  font-size: 25px;
}

.newpric {
  color: rgb(184, 29, 29);
  font-weight: 800;
  font-size: 12px;
}

.np {
  position: absolute;
  top: 0;
  margin-left: 10px;
}

.hint {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.hint p {
  /* width: 100px; */
  text-align: center;
  /* border: 1px solid black; */
  display: flex;
  font-size: 10px;
  margin-right: 30px;
  letter-spacing: 2px;
}

.hint p img {
  padding-right: 8px;
}

.design {
  position: relative;
  margin-top: 25px;
}

.design h6 {
  font-size: 18px;
  font-weight: 500;
}

.design_1 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.design_1 div {
  margin-top: 15px;
  width: 60px;
  height: 30px;
  padding-top: 5px;
  box-sizing: border-box;
  border-radius: 50px;
  text-align: center;
  border-radius: 30px 30px 30px 30px;
  background-color: #f0f0f0;
}

.design_1 div {
  background-color: #f0f0f0;
  color: #bcbcbc;
  margin-right: 20px;

  /* z-index: 999; */
}

/* 点击然后添加class名称 */
.clik {
  color: rgb(184, 29, 29);
  background-color: rgba(240, 201, 201, 0.338);
}

.sk {
  width: 50px;
  height: 30px;
  background-color: #bcbcbccc;
  border-radius: 30px 30px 0 30px;
  text-align: center;
  color: white;
  position: absolute;
  top: 28px;
  left: 100px;
}

i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  background-color: rgb(239, 238, 238);
  /* border: 1px solid black; */
  border-radius: 50px;
}

.num {
  margin: 0px 5px;
}

.price {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.addsub {
  margin-right: 15px;
}

.ply {
  position: absolute;
  bottom: 10px;
}

.ply button {
  width: 360px;
  height: 40px;
  background-color: red;
  color: white;
  border: 0px;
  border-radius: 30px;
}

.ply button a {
  color: white;
}

.interested {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.tui {
  width: 180px;
  height: 240px;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 20px;
}

input {
  width: 15px;
  height: 15px;
}

footer {
  width: 100%;
  height: 35px;
  position: fixed;
  background-color: #ffffff;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer div:nth-child(1) {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
}

footer div {
  width: 160px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer div:nth-child(2) div {
  width: 80px;
  height: 30px;
  border-radius: 20px;
  background-color: rgb(252, 55, 72);
}

.money {
  color: rgb(252, 55, 72);
}

.tui img {
  width: 180px;
  height: 150px;
}

.tui span {
  font-size: 9px;
  color: rgb(57, 57, 57);
  display: block;
  width: 160px;
}

.tui p:nth-child(1) {
  color: rgb(252, 55, 72);
  font-size: 12px;
}

.tui p:nth-child(2) {
  color: rgb(252, 55, 72);
  font-weight: 600;
  font-size: 13px;
}

.silver_dollar {
  margin-bottom: 7px;
  width: 170px;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.silver_dollar div {
  font-size: 12px;
  color: rgb(181, 181, 181);
}

.tui {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.car_commodity {
  width: 370px;
  padding: 20px 0px;
  border-radius: 15px 15px 0 0;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.car_commodity div:nth-child(1) {
  width: 358px;
  height: 30px;
  /* background-color: rgb(115, 50, 255); */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.car_commodity div:nth-child(1) div:nth-child(1) {
  width: 178px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.car_commodity div:nth-child(1) img {
  width: 20px;
  height: 20px;
}

.car_commodity div input {
  width: 18px;
  height: 18px;
}

.car_commodity div:nth-child(1) div:nth-child(2) {
  margin-right: 10px;
  font-size: 14px;
  width: 40px;
  height: 23px;
  border: 1px solid;
  border-radius: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

#left_sp {
  width: 130px;
  height: 110px;
  display: flex;
}

#right_sp {
  width: 220px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#zhong {
  width: 358px;
  height: 116px;
  display: flex;
  justify-content: space-between;
}

#left_sp img {
  width: 100px;
  height: 100px;
  border-radius: 15px;
}

#explain {
  width: 213px;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
}

#explain1 {
  width: 200px;
  height: 30px;
  white-space: nowrap;
  background-color: rgb(244, 244, 244);
  line-height: 30px;
  border-radius: 7px;
}

#explain2 {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#explain2 p:nth-child(2) {
  font-weight: 600;
}

#explain3 {
  border: 1px solid;
  width: 35px;
  height: 20px;
  border-radius: 15px;
  text-align: center;
  line-height: 20px;
  margin-right: 9px;
}

#explain4 {
  width: 350px;
  height: 30px;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#explain4 p:nth-child(1) {
  font-size: 15px;
  color: #e60d0d;
}

#explain4 p:nth-child(2) {
  font-size: 18px;
  font-weight: 600;
  color: #e60d0d;
}

#ax {
  width: 40px !important;
  background: #000 !important;
  /* height: ; */
}
</style>
